<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: papayawhip;
        }
    </style>
</head>

<body>
    <div></div>
    <script>
        // 函数声明方法1
        function a() {

        }
        // 函数声明方法2
        let b = function () {

        }
        // 函数声明方法3
        let c = () => {

        }

        let d = (am, bm) => {
            return am + bm
        }
        let sun = d(2, 4)
        console.log(sun);
        // 箭头函数下的this是静态的， 始终始终指向函数所在作用域下this的值（指向父亲），不能作为构造函数实例化对象，没有arguments
        // 箭头函数适合与this无关的回调，定时器，数组的的方法回调
        // 不适合与this有关的回调，事件回调，对象回调


        // 案例
        let div = document.querySelector('div')

        // div.addEventListener('click',function(){
        //     setTimeout(function(){
        //        this.style.backgroundColor='pink'
        //     },1000)
        // })

        div.addEventListener('click', function () {
            // 方法1
            let _this = this;
            setTimeout(function () {
                // console.log(_this);这个—_this指向的是div
                _this.style.backgroundColor = 'pink'
            }, 1000)
        })

        // div.addEventListener('click',function(){
        //     setTimeout(()=>{
        //         // console.log(this);用箭头函数时上个function的
        //         this.style.backgroundColor='pink'
        //     },1000)
        // })
    </script>
</body>

</html>